<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/newsong.css">
    <!-- 引入图标的css代码 -->
    <link rel="stylesheet" href="../font/iconfont.css">
    <!-- 引入图标的js代码 -->
    <script src="../font/iconfont.js"></script>
    <!-- js -->
    <script src="../js/index.js"></script>
    <script src="../js/newsong.js"></script>
</head>

<!-- 头部 -->
<header class="g-topbar">
    <div class="m-top">
        <div class="content">
            <a href="#" class="logo">
            </a>
            <ul class="m-nav">
                <li>
                    <span>
                        <a href="javascript:;">
                            <em>发现音乐</em>
                            <!-- 这个是用来做一个三角形 -->
                            <span class="triangle">&nbsp;</span>
                        </a>
                    </span>
                </li>
                <li>
                    <span>
                        <a href="javascript:;">
                            <em>我的音乐</em>
                            <span class="triangle">&nbsp;</span>
                        </a>
                    </span>
                </li>
                <li>
                    <span>
                        <a href="javascript:;">
                            <em>朋友</em>
                            <span class="triangle">&nbsp;</span>
                        </a>
                    </span>
                </li>
                <li>
                    <span>
                        <a href="javascript:;">
                            <em>商城</em>
                            <span class="triangle">&nbsp;</span>
                        </a>
                    </span>
                </li>
                <li>
                    <span>
                        <a href="javascript:;">
                            <em>音乐人</em>
                            <span class="triangle">&nbsp;</span>
                        </a>
                    </span>
                </li>
                <li>
                    <span>
                        <a href="javascript:;">
                            <em>下载客户端</em>
                            <span class="triangle">&nbsp;</span>
                        </a>
                    </span>
                    <sup class="hot">&nbsp;</sup>
                </li>
            </ul>
            <div class="m-tophead">
                <a href="javascript:;" class="link">登录</a>
            </div>
            <a href="javascript:;" class="m-create-center">创作者中心</a>
            <div class="m-search">
                <div class="searchbg">
                    <span class="parent">
                        <input type="text" class="txt" placeholder="音乐/视频/电台/用户">
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="m-subtop">
        <div class="ms-set">
            <ul>
                <li>
                    <a href="index.html">
                        <em>推荐</em>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <em>排行榜</em>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <em>歌单
                            <span class="f-icon">&nbsp;</span>
                        </em>

                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <em>主播电台</em>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <em>歌手</em>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <em class="bg">新碟上架</em>
                    </a>
                </li>
            </ul>

        </div>
    </div>
</header>
<!-- 主体部分 -->
<div class="main">
    <div class="song-commend">
        <div class="inner">
            <div class="inner-top">
                <h2></h2>
            </div>
            <div class="inner-middle">
                <a href="#">为你推荐</a>
                <a href="#">网络歌曲</a>
                <a href="#">经典</a>
                <a href="#">轻音乐</a>
                <a href="#">官方歌曲</a>
                <a href="#">情歌</a>
            </div>
            <div class="inner-bottom">
                <!-- 左侧按钮 -->
                <a href="javascript:;" class="iconfont icon-zuohua left"></a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="iconfont icon-youhua right"></a>
                <div class="inner-img">
                    <ul>
                        <li>

                            <a class="img-one" href="#">
                                <img src="../upload/commend1.webp" alt="">
                                <i class="inner-play"></i>
                            </a>

                            <h4>美式乡村里的浪漫爱情故事</h4>
                            <div>播放量：31.7万</div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../upload/commend2.webp" alt="">
                            </a>
                            <i class="inner-play"></i>
                            <h4>♡那些关于暗恋的粤语情歌♡</h4>
                            <div>播放量：44.1万</div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../upload/commend3.webp" alt="">
                            </a>
                            <i class="inner-play"></i>
                            <h4>Rainy Days | 关于下雨的抒情歌</h4>
                            <div>播放量：50.4万</div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../upload/commend4.webp" alt="">
                            </a>
                            <i class="inner-play"></i>
                            <h4>我未说出的爱，是TA期待的告白</h4>
                            <div>播放量：45.6万</div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../upload/commend5.webp" alt="">
                            </a>
                            <i class="inner-play"></i>
                            <h4>青春怀旧｜染指流年重拾90后回忆</h4>
                            <div>播放量：615.9万</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- mv首播模块 -->
    <div class="wrap">
        <div class="title">M V</div>
        <div class="title_menu">
            <div class="title-center">
                <ul>
                    <li>全部</li>
                    <li>内地</li>
                    <li>港台</li>
                    <li>欧美</li>
                    <li>韩国</li>
                    <li>日本</li>
                </ul>
            </div>
            <div class="title-right">全部 ></div>
        </div>
        <div class="singer">
            <div>
                <img src="../upload/mv1.webp">
                <div>
                    <span class="sing">Summer Storm</span>
                    <span class="singp1">제시카</span>
                    <span class="singp2"><i class="icon-play"></i>13.9万</span>
                </div>
            </div>
            <div>
                <img src="../upload/mv2.webp" alt="">
                <div>
                    <span class="sing">海胆</span>
                    <span class="singp1">陈奕迅</span>
                    <span class="singp2"><i class="icon-play"></i>10.3万</span>
                </div>
            </div>
            <div>
                <img src="../upload/mv3.webp" alt="">
                <div>
                    <span class="sing">我心翱翔</span>
                    <span class="singp1">SNH48</span>
                    <span class="singp2"><i class="icon-play"></i>1.8万</span>
                </div>
            </div>
            <div>
                <img src="../upload/mv4.webp" alt="">
                <div>
                    <span class="sing">隔一道挽星</span>
                    <span class="singp1">A-Lin</span>
                    <span class="singp2"><i class="icon-play"></i>6272</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 尾部 -->
<footer class="g-ft">
    <div class="g-ft-set">
        <div class="l-ft">
            <div class="links">
                <a href="javascript:;">服务条款</a>
                <span class="line">|</span>
                <a href="javascript:;">隐私政策</a>
                <span class="line">|</span>
                <a href="javascript:;">儿童隐私政策</a>
                <span class="line">|</span>
                <a href="javascript:;">版权投诉指引</a>
                <span class="line">|</span>
                <a href="javascript:;">联系我们</a>
                <span class="line">|</span>
                <a href="javascript:;">广告合作</a>
                <span class="line">|</span>
                <a href="javascript:;">廉正举报</a>

            </div>
            <div class="sup-copyright">
                <span>网易公司版权所有©1997-2021</span>
                <a href="javascript:;">杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</a>
            </div>
            <div class="sub-copyright">
                <a href="javascript:;">粤B2-20090191-18 &nbsp工业和信息化部备案管理系统网站&nbsp&nbsp</a>
                <a href="javascript:;" class="police">
                    <span class="police-logo">&nbsp;</span>
                    <span class="police-text">浙公网安备 33010902002564号</span>
                </a>
            </div>
        </div>
        <ul class="r-ft">
            <li>
                <a href="javasript:;" class="newlogo a-studio"></a>
                <span class="text t-as"></span>
            </li>
            <li>
                <a href="javasript:;" class="newlogo id"></a>
                <span class="text t-id"></span>
            </li>
            <li>
                <a href="javasript:;" class="newlogo musician"></a>
                <span class="text t-musician"></span>
            </li>
            <li>
                <a href="javasript:;" class="newlogo reward"></a>
                <span class="text t-reward"></span>
            </li>
            <li>
                <a href="javasript:;" class="newlogo video"></a>
                <span class="text t-video"></span>
            </li>
        </ul>
    </div>

</footer>
<!-- 页面中的音乐播放条 -->
<div class="g-player">
    <div class="m-player">
        <div class="bg"></div>
        <div class="r-key">
            <div class="key">
                <a href="javascript:;" class="icon-key">
                </a>
            </div>
        </div>
        <div class="hand" title="展开播放条"></div>
        <div class="content">
            <div class="player-btns">
                <a class="last" href="javascript:;" title="上一首(ctrl+←)"></a>
                <a class="start" href="javascript:;" title="播放/暂停(p)"></a>
                <a class="next" href="javascript:;" title="下一首(ctrl+→)"></a>
            </div>
            <div class="player-img">
                <img src="../images/default_album.jpg" alt="">
                <a href="javascript:;"></a>
            </div>
            <div class="player-line">
                <div class="song-name"></div>
                <div class="line">
                    <div class="r">
                        <div class="progress"></div>
                        <div class="btn-box">
                            <span class="btn"></span>
                        </div>
                    </div>
                    <span class="time">
                        <em>00:00</em>
                        / 00:00
                    </span>
                </div>
            </div>
            <div class="player-oper">
                <a href="javascript" class="icon lyr" title="画中画歌词"></a>
                <a href="javascript" class="icon add" title="收藏"></a>
                <a href="javascript" class="icon share" title="分享"></a>
            </div>
            <div class="player-ctrl">
                <a href="javascript:;" class="icon vol"></a>
                <a href="javascript:;" class="icon loop" title="循环"></a>
                <span class="list">
                    <a href="javascript:;" class="icon icon-list" title="播放列表"></a>
                </span>
            </div>
        </div>

    </div>
</div>
<!-- 页面中的反馈、返回顶部 -->
<a href="javascript:;" class="play">
    <img src="../images/qr.png" alt="">
    <div class="code">
        <img src="../images/QRcode" alt="">
        <p>扫描二维码下载</p>
    </div>
</a>
<a href="javascript:;" class="topback iconfont icon-shanghua"></a>
<a href="javascript:;" class="feedback">反馈</a>

</body>

</html>